<script lang="ts">
  import { Menu } from '@ark-ui/svelte/menu'
</script>

<Menu.Root>
  <Menu.Trigger>Open menu</Menu.Trigger>
  <Menu.Positioner>
    <Menu.Content>
      <Menu.ItemGroup>
        <Menu.ItemGroupLabel>JS Frameworks</Menu.ItemGroupLabel>
        <Menu.Item value="react">React</Menu.Item>
        <Menu.Item value="solid">Solid</Menu.Item>
        <Menu.Item value="vue">Vue</Menu.Item>
        <Menu.Item value="svelte">Svelte</Menu.Item>
      </Menu.ItemGroup>
      <Menu.ItemGroup>
        <Menu.ItemGroupLabel>CSS Frameworks</Menu.ItemGroupLabel>
        <Menu.Item value="panda">Panda</Menu.Item>
        <Menu.Item value="tailwind">Tailwind</Menu.Item>
      </Menu.ItemGroup>
    </Menu.Content>
  </Menu.Positioner>
</Menu.Root>
